<template>
  <div class="project-gstc-gantt">
      <GanttView :lists="lists" :menuWidth="windowMax768 ? 180 : 260" :itemWidth="80" @on-change="updateTime" @on-click="clickItem"/>
      <Dropdown class="project-gstc-dropdown-filtr" :style="windowMax768?{left:'102px'}:{left: '182px'}" @on-click="tapType">
          <Icon class="project-gstc-dropdown-icon filtr" type="md-funnel" />
          <DropdownMenu slot="list">
            <DropdownItem name="doing" :class="{'dropdown-active':filtrTypeId=='doing'}">未完成</DropdownItem>
            <DropdownItem name="done" :class="{'dropdown-active':filtrTypeId=='done'}">已完成</DropdownItem>
          </DropdownMenu>
      </Dropdown>
      <Dropdown class="project-gstc-dropdown-filtr" :style="windowMax768?{left:'142px'}:{}" @on-click="tapProject">
          <Icon class="project-gstc-dropdown-icon" :class="{filtr:filtrProjectId>0}" type="md-funnel" />
          <DropdownMenu slot="list">
              <DropdownItem :name="0" :class="{'dropdown-active':filtrProjectId==0}">{{$L('全部')}}</DropdownItem>
              <DropdownItem v-for="(item, index) in projectLabel" :key="index" :name="item.id" :class="{'dropdown-active':filtrProjectId==item.id}">{{item.title}} ({{item.taskLists.length}})</DropdownItem>
          </DropdownMenu>
      </Dropdown>
      <div class="project-gstc-close" @click="$emit('on-close')"><Icon type="md-close" /></div>
      <div class="project-gstc-edit" :class="{info:editShowInfo, visible:editData.length > 0}">
          <div class="project-gstc-edit-info">
              <Table class="tableFill" size="small" max-height="600" :columns="editColumns" :data="editData"></Table>
              <div class="project-gstc-edit-btns">
                  <Button :loading="editLoad > 0" size="small" type="text" @click="editSubmit(false)">{{$L('取消')}}</Button>
                  <Button :loading="editLoad > 0" size="small" type="primary" @click="editSubmit(true)">{{$L('保存')}}</Button>
                  <Icon type="md-arrow-dropright" class="zoom" @click="editShowInfo=false"/>
              </div>
          </div>
          <div class="project-gstc-edit-small">
              <div class="project-gstc-edit-text" @click="editShowInfo=true">{{$L('未保存计划时间')}}: {{editData.length}}</div>
              <Button :loading="editLoad > 0" size="small" type="text" @click="editSubmit(false)">{{$L('取消')}}</Button>
              <Button :loading="editLoad > 0" size="small" type="primary" @click="editSubmit(true)">{{$L('保存')}}</Button>
          </div>
      </div>
  </div>
</template>

<style lang="scss">
  .project-gstc-gantt {
      position: absolute;
      top: 15px;
      left: 15px;
      right: 15px;
      bottom: 15px;
      z-index: 1;
      transform: translateZ(0);
      background-color: #fdfdfd;
      border-radius: 3px;
      overflow: hidden;
      .project-gstc-dropdown-filtr {
          position: absolute;
          top: 38px;
          left: 222px;
          .project-gstc-dropdown-icon {
              cursor: pointer;
              color: #999;
              font-size: 20px;
              &.filtr {
                  color: #058ce4;
              }
          }
      }
      .project-gstc-close {
          position: absolute;
          top: 8px;
          left: 12px;
          cursor: pointer;
          &:hover {
              i {
                  transform: scale(1) rotate(45deg);
              }
          }
          i {
              color: #666666;
              font-size: 28px;
              transform: scale(0.92);
              transition: all .2s;
          }
      }
      .project-gstc-edit {
          position: absolute;
          bottom: 6px;
          right: 6px;
          background: #ffffff;
          border-radius: 4px;
          opacity: 0;
          transform: translate(120%, 0);
          transition: all 0.2s;
          &.visible {
              opacity: 1;
              transform: translate(0, 0);
          }
          &.info {
              .project-gstc-edit-info {
                  display: block;
              }
              .project-gstc-edit-small {
                  display: none;
              }
          }
          .project-gstc-edit-info {
              display: none;
              border: 1px solid #e4e4e4;
              background: #ffffff;
              padding: 6px;
              border-radius: 4px;
              width: 500px;
              .project-gstc-edit-btns {
                  margin: 12px 6px 4px;
                  display: flex;
                  align-items: center;
                  justify-content: flex-end;
                  .ivu-btn {
                      margin-right: 8px;
                      font-size: 13px;
                  }
                  .zoom {
                      font-size: 20px;
                      color: #444444;
                      cursor: pointer;
                      &:hover {
                          color: #57a3f3;
                      }
                  }
              }
          }
          .project-gstc-edit-small {
              border: 1px solid #e4e4e4;
              background: #ffffff;
              padding: 6px 12px;
              display: flex;
              align-items: center;
              .project-gstc-edit-text {
                  cursor: pointer;
                  text-decoration: underline;
                  color: #444444;
                  margin-right: 8px;
                  &:hover {
                      color: #57a3f3;
                  }
              }
              .ivu-btn {
                  margin-left: 4px;
                  font-size: 13px;
              }
          }
      }
  }
</style>
<script>
  import GanttView from "../../gantt/index";

  /**
   * 甘特图
   */
  export default {
      name: 'ProjectGantt',
      components: {GanttView },
      props: {
          projectLabel: {
              default: []
          },
      },

      data () {
          return {
              loadFinish: false,

              lists: [],

              editColumns: [],
              editData: [],
              editShowInfo: false,
              editLoad: 0,

              filtrProjectId: 0,
              filtrTypeId: 'done'
          }
      },

      mounted() {
          this.editColumns = [
              {
                  title: this.$L('任务名称'),
                  key: 'label',
                  minWidth: 150,
                  ellipsis: true,
              }, {
                  title: this.$L('原计划时间'),
                  minWidth: 135,
                  align: 'center',
                  render: (h, params) => {
                      if (params.row.notime === true) {
                          return h('span', '-');
                      }
                      return h('div', {
                          style: {},
                      }, [
                          h('div', $A.formatDate('Y-m-d H:i', Math.round(params.row.backTime.start / 1000))),
                          h('div', $A.formatDate('Y-m-d H:i', Math.round(params.row.backTime.end / 1000)))
                      ]);
                  }
              }, {
                  title: this.$L('新计划时间'),
                  minWidth: 135,
                  align: 'center',
                  render: (h, params) => {
                      return h('div', {
                          style: {},
                      }, [
                          h('div', $A.formatDate('Y-m-d H:i', Math.round(params.row.newTime.start / 1000))),
                          h('div', $A.formatDate('Y-m-d H:i', Math.round(params.row.newTime.end / 1000)))
                      ]);
                  }
              }
          ];
          //
          this.initData();
          this.loadFinish = true;
      },

      watch:{
          projectLabel: {
              handler() {
                  this.initData();
              },
              deep: true,
          }
      },

      methods: {
          initData() {
              this.lists = [];
              this.projectLabel.forEach((item) => {
                  if (this.filtrProjectId > 0) {
                      if (item.id != this.filtrProjectId) {
                          return;
                      }
                  }
                  item.taskLists.forEach((taskData) => {
                    const data = {
                      label: taskData.title,
                      subTask: []
                    }
                    if (taskData.subTask && taskData.subTask.length) {
                      data.subTask = taskData.subTask.map(item => this.generateData(item))
                    }
                    this.lists.push(data)
                  });
              });
              //
              if (this.lists.length == 0 && this.filtrProjectId == 0) {
                  this.$Modal.warning({
                      title: this.$L("温馨提示"),
                      content: this.$L('任务列表为空，请先添加任务。'),
                      onOk: () => {
                          this.$emit('on-close');
                      },
                  });
              }
          },
          generateData(data) {
            let notime = data.startdate == 0 || data.enddate == 0;
            let times = this.getTimeObj(data);
            let start = times.start;
            let end = times.end;
            //
            let color = '#058ce4';
            if (data.complete) {
                color = '#c1c1c1';
            } else {
                if (data.level === 1) {
                    color = '#ff0000';
                }else if (data.level === 2) {
                    color = '#BB9F35';
                }else if (data.level === 3) {
                    color = '#449EDD';
                }else if (data.level === 4) {
                    color = '#84A83B';
                }
            }
            //
            let tempTime = { start, end };
            let findData = this.editData.find((t) => { return t.id == data.id });
            if (findData) {
                findData.backTime = $A.cloneData(tempTime)
                tempTime = $A.cloneData(findData.newTime);
            }
            return {
              id: data.id,
              label: data.title,
              time: tempTime,
              notime: notime,
              style: { background: color },
              pname: data.pname,
              lblname: data.lblname,
            }
          },
          updateTime(item) {
              let original = this.getRawTime(item.id);
              if (Math.abs(original.end - item.time.end) > 1000 || Math.abs(original.start - item.time.start) > 1000) {
                  //修改时间（变化超过1秒钟)
                  let backTime = $A.cloneData(original);
                  let newTime = $A.cloneData(item.time);
                  let findData = this.editData.find(({id}) => id == item.id);
                  if (findData) {
                      findData.newTime = newTime;
                  } else {
                      this.editData.push({
                          id: item.id,
                          label: item.label,
                          notime: item.notime,
                          backTime,
                          newTime,
                      })
                  }
              }
          },

          clickItem(item) {
              this.taskDetail(item.id);
          },

          editSubmit(save) {
              let triggerTask = [];
              this.editData.forEach((item) => {
                  if (save) {
                      this.editLoad++;
                      let timeStart = $A.formatDate('Y-m-d H:i', Math.round(item.newTime.start / 1000));
                      let timeEnd = $A.formatDate('Y-m-d H:i', Math.round(item.newTime.end / 1000));
                      let ajaxData = {
                          act: 'plannedtime',
                          taskid: item.id,
                          content: timeStart + "," + timeEnd,
                      };
                      $A.apiAjax({
                          url: 'project/task/edit',
                          method: 'post',
                          data: ajaxData,
                          error: () => {
                              this.lists.some((task) => {
                                  if (task.id == item.id) {
                                      this.$set(task, 'time', item.backTime);
                                      return true;
                                  }
                              });
                          },
                          success: (res) => {
                              if (res.ret === 1) {
                                  triggerTask.push({
                                      status: 'await',
                                      act: ajaxData.act,
                                      taskid: ajaxData.taskid,
                                      data: res.data,
                                  })
                              } else {
                                  this.lists.some((task) => {
                                      if (task.id == item.id) {
                                          this.$set(task, 'time', item.backTime);
                                          return true;
                                      }
                                  });
                              }
                          },
                          afterComplete: () => {
                              this.editLoad--;
                              if (this.editLoad <= 0) {
                                  triggerTask.forEach((info) => {
                                      if (info.status == 'await') {
                                          info.status = 'trigger';
                                          $A.triggerTaskInfoListener(info.act, info.data);
                                          $A.triggerTaskInfoChange(info.taskid);
                                      }
                                  });
                              }
                          },
                      });
                  } else {
                      this.lists.some((task) => {
                          if (task.id == item.id) {
                              this.$set(task, 'time', item.backTime);
                              return true;
                          }
                      })
                  }
              });
              this.editData = [];
          },

          getRawTime(taskId) {
              let times = null;
              this.projectLabel.some((item) => {
                  item.taskLists.some((taskData) => {
                      if (taskData.id == taskId) {
                          times = this.getTimeObj(taskData);
                          return true;
                      }
                  });
                  if (times) {
                      return true;
                  }
              });
              return times;
          },

          getTimeObj(taskData) {
              let start = taskData.startdate || taskData.indate;
              let end = taskData.enddate || (taskData.indate + 86400);
              if (end == start) {
                  end = Math.round(new Date($A.formatDate('Y-m-d 23:59:59', end)).getTime()/1000);
              }
              end = Math.max(end, start + 60);
              start*= 1000;
              end*= 1000;
              return {start, end};
          },

          tapProject(e) {
              this.filtrProjectId = $A.runNum(e);
              this.initData();
          },
          tapType(e) {
            this.filtrTypeId = e;
            this.$emit('change-type', this.filtrTypeId);
          }
      }
  }
</script>
